<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>search</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/searchActor.css">
    <link rel="stylesheet" href="css/headerCss.css">
    <style>
        .active {
            color: red !important;
        }
    </style>
</head>
<body>
<myheader></myheader>
<div style="height: 80px"></div>
<section>
    <div class="subnav">
        <div class="search-box">
            <form action="./search.html">
                <input class="search-input" name="kw" type="text" placeholder="找影视剧，影人" v-model="kw">
                <input type="submit" class="search-button"  value="">
            </form>
        </div>
        <ul class="search-ul">
            <li><a href="#" @click="fn(0)" :class="{active:0 == active}">影视剧</a></li>
            <li><a href="#" @click="fn(1)" :class="{active:1 == active}">影人</a></li>
        </ul>

    </div>
    <div class="container" style="width: 1200px;margin: 40px auto 0 auto">
        <div class="row">
            <ul class="container-ul">
                <li class="col-md-6" v-for="a in actorList">
                    <div class="item-poster col-md-4">
                        <a :href="'./actor.html?id='+a.actorId"><img :src="a.actorUrl" alt="1" width="160" height="220">
                        </a>
                    </div>
                    <div class="col-md-8 ">
                        <a class="actorDiv" :href="'./actor.html?id='+a.actorId">
                            <div class="item-title">{{a.name}}</div>
                        </a>
                        <div class="item-info">
                            <div class="item-sea">{{a.fansNum}}人关注</div>
                            <div class="item-detail">代表作：{{a.rep}}</div>
                        </div>
                    </div>
                </li>
            </ul>
            <ul class="container-ul">
                <li class="col-md-6" v-for="m in movieList">
                    <div class="item-poster col-md-4">
                        <a :href="'./movie-details.html?id='+m.movieId">
                            <img :src="m.movieUrl" alt="" width="160" height="220">
                        </a>
                    </div>
                    <div class="col-md-8 ">
                        <div class="item-title">{{m.movieName}}</div>
                        <div class="item-info">
                            <div class="item-sea">评分：{{m.score}}</div>
                            <div class="item-detail">{{m.category}}</div>
                            <div class="item-time">{{m.playDate}}</div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</section>

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!--引入axios-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!--引入处理时间格式的js文件-->
<script src="http://cdn.staticfile.org/moment.js/2.24.0/moment.js"></script>
<script src="js/header.js"></script>
<script>
    let vm = new Vue({
        el: "section",
        data: {
            kw: "",
            active: 1,
            actorList: [],
            movieList: []
        },
        created: function () {
            let k = decodeURIComponent(location.search.split("=")[1]);
            this.kw = k;
            axios.get("/actor/searchByName?name=" + k).then(function (response) {
                vm.actorList = response.data
            })
        },
        methods: {
            fn: function (i) {
                vm.active = i;
                if (i == 1) {
                    axios.get("/actor/searchByName?name=" + vm.kw).then(function (response) {
                        vm.actorList = response.data
                    })
                    vm.movieList=[];
                }else {
                    axios.get("/movie/searchByName?name=" + vm.kw).then(function (response) {
                        vm.movieList = response.data
                        for (let m of vm.movieList) {
                            m.playDate = moment(m.playDate)
                                .format("YYYY-MM-DD");
                            if (m.score==0){
                                m.score='暂无'
                            }
                        }
                        vm.actorList=[]
                    })
                }
            }
        }
    })
</script>
</body>
</html>